<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';

const router = useRouter();
const username = ref('');  // 假设对应接口的email字段
const password = ref('');  // 对应接口的pwd字段
const confirmPassword = ref('');
// 如果需要性别字段，可添加：const gender = ref('男');

const onSubmit = async () => {  // 改为异步函数
  // 验证密码一致性
  if (password.value !== confirmPassword.value) {
    showToast('两次输入的密码不一致');
    return;
  }

  try {
    // 构造请求头
    const myHeaders = new Headers();
    myHeaders.append("User-Agent", "Apifox/1.0.0 (https://apifox.com)");
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Accept", "*/*");
    myHeaders.append("Host", "127.0.0.1:9999");
    myHeaders.append("Connection", "keep-alive");

    // 构造请求体（根据接口要求调整字段，示例假设username对应email）
    const raw = JSON.stringify({
      email: username.value,
      pwd: password.value,
    });

    const requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: raw,
      redirect: 'follow'
    };

    // 调用后端接口
    const response = await fetch("http://127.0.0.1:9999/v2/user/adduser", requestOptions);

    if (!response.ok) {  // 处理HTTP错误状态码
      const errorData = await response.json();
      throw new Error(errorData.message || '注册失败，请重试');
    }

    const result = await response.json();  // 假设接口返回JSON格式
    showToast('注册成功');
    router.push({ name: 'Login' });  // 注册成功跳转到登录页

  } catch (error) {
    showToast(error.message || '网络请求失败');
  }
};

const goLogin = () => {
  router.push({ name: 'Login' });
};
</script>

<template>
  <!-- 保持原有模板结构，若需要性别字段可添加： -->
  <!-- <van-field v-model="gender" label="性别" placeholder="请选择性别" /> -->
  <div class="register-container">
    <div class="top">
      <van-image class="logo" src="/src/assets/ico.png" />
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名/邮箱"
        placeholder="请输入邮箱"
        :rules="[{ required: true, message: '请填写邮箱' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="confirmPassword"
        type="password"
        name="confirmPassword"
        label="确认密码"
        placeholder="请再次输入密码"
        :rules="[{ required: true, message: '请确认密码' }]"
      />
    </van-form>
    <van-button round block type="primary" native-type="submit" @click="onSubmit">
      注册
    </van-button>
    <div class="bottom">
      <div class="login">已有账号？<span class="protocol" @click="goLogin">点击登录</span></div>
    </div>
  </div>
</template>

<style scoped>
/* 复用Login.vue的基础样式，仅调整容器类名 */
.register-container {
  padding: 20px;
  height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top {
  padding: 200rpx 0 30rpx;
  display: flex;
  justify-content: center;
}

.logo {
  width: 100px;
  height: 100px;
  margin: 50px;
}

.bottom {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.login {
  color: #999;
  font-size: 24rpx;
}

.protocol {
  color: var(--van-primary-color);
  font-size: 24rpx;
}

.van-button {
  margin-top: 20px;
}
</style>
